import React, { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay, Lazy, Navigation } from 'swiper';
import request from '@/utils/request';
import { interfaceConfig } from '@/config/interfaceConfig';
import _ from 'lodash';
import 'swiper/less';
import 'swiper/less/pagination';
import 'swiper/less/navigation';
import 'swiper/less/autoplay';
import 'swiper/less/navigation';
import './Banner.less';

const Banner = () => {
  const [banners, setBanners] = useState([]);
  useEffect(() => {
    request.get(interfaceConfig.Banner).then((ret) => {
      if (ret.code === 200) {
        setBanners(ret.banners);
      }
    });
  }, []);
  const swiperProps = {
    onSwiper: (swiper) => {
      swiper.el.onmouseover = () => {
        swiper.autoplay.stop();
      };
      swiper.el.onmouseout = () => {
        swiper.autoplay.start();
      };
    },
    className: 'banner',
    loop: true,
    modules: [Pagination, Lazy, Autoplay, Navigation],
    initialSlide: 2,
    centeredSlides: true,
    slidesPerView: 2,
    spaceBetween: -120,
    autoplay: {
      delay: 4000,
      pauseOnMouseEnter: true,
    },
    pagination: {
      clickable: true,
      bulletClass: 'pagination_item',
      bulletActiveClass: 'pagination_item_active',
    },
    lazy: {
      loadPrevNext: true,
    },
    navigation: true,
  };
  return (
    <Swiper {...swiperProps}>
      {_.map(banners, (item, key) => {
        return (
          <SwiperSlide key={key}>
            <a data-background={item.imageUrl} className="swiper-lazy">
              <div className="swiper-lazy-preloader swiper-lazy-preloader-black"></div>
            </a>
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
};

export default Banner;
